<template>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>就诊人管理</span>
          <el-button type="primary" :icon="Plus" @click="AddPatients" v-if="configStore.isPatientShow==1"  >添加就诊人</el-button>
          <el-button v-else type="info" @click="backPatent" :icon="Back" >返回</el-button>
        </div>
      </template>
      <div class="content" v-if="configStore.isPatientShow==1" >
       <div class="patient" v-if="isShow==1" >
        <Patient @deletePatient="deletePatient" v-for="item in patientList" :key="item._id" :patient="item" ></Patient>
       </div>
       <el-empty  v-else :image-size="200" description="暂无就诊人信息" />
        
      </div>
      <div class="addPatient" v-else >
        <AddPatient :getPatient="getPatient"  ></AddPatient>
      </div>
    </el-card>
  </template>
  
  <script setup>
  import { ref , onMounted , computed , watch } from 'vue'
  import { Plus , Back } from '@element-plus/icons-vue'
  import { getPatientListAPI  } from '@/api/patient'
  import { useRoute , useRouter } from 'vue-router'
  import Patient from './PatientCard/index.vue'
  import AddPatient from './AddPatient/index.vue'
  import useConfigStore from '@/stores/moudels/configStore'
  let route = useRoute()
  let router = useRouter()
  let configStore = useConfigStore()
  //就诊人列表
  let patientList = ref([])
  //控制就诊人列表的显示与隐藏
  const isShow = computed(()=>{
    return patientList.value.length>0?1:0
  })
  onMounted(()=>{
    getPatient()
  })
  watch(()=>configStore.isPatientShow,(newValue)=>{
  console.log(newValue);
  if(newValue==1) {
    configStore.changePatientId(null)
  }
})
  //获取就诊人列表
  const getPatient = async ()=>{
    configStore.changePatientShow(1)
    let result = await getPatientListAPI()
    patientList.value = result.data
  }
  //返回就诊人列表
  const backPatent = ()=>{
    configStore.changePatientShow(1)
    if(route.query.isBack) {
      router.back()
    }
  }
  //添加就诊人回调
  const AddPatients = ()=>{
    configStore.changePatientShow(2)
  }
  //自定义事件
  const deletePatient = ()=>{
    getPatient()
  }
  
  </script>
  
  <style scoped lang="scss">
  .box-card {
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .content {
      margin: 20px auto;
      .patient {
        display: flex;
      flex-wrap: wrap;
      }
     
    }
  }
  </style>

  